<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.container{
				box-sizing: border-box;
				width: 750px;
				height: 340px;
				border: solid 1px gray;
				position: relative;
			}
			
			.imgs{
				position: relative;
			}
			.imgs img{
				width:750px;
				height: 340px;
				display: inline-block;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 100px;
				
			}
			
			.container .dot{
				position: absolute;
				right: 10px;
				bottom: 10px;
				z-index: 99999;
			}
			.container .dot span{
				width: 20px;
				height: 20px;
				border-radius:10px ;
				display: inline-block;
				text-align: center;
				line-height: 20px;
				/* background-color: rgba(0,0,0,0.5); */
				background-color: rgb(0,0,0);
				font-size: 12px;
				color:#FFF ;
				cursor:pointer;
				opacity: 0.5;
				z-index: 99999;
			}
			.container .dot span:hover{
				background-color: #CD0001;
				opacity: 1;
				font-weight: 900;
			}
		</style>
	</head>
	<body>
	
	
		
		<div class="container">
			<div class="imgs" >
		<img src="https://img1.youlu.net/pic/flash/202208251647114711.jpg" style="z-index: 500;" />
				<img src="https://img1.youlu.net/pic/flash/202202151045524552.jpg" style="z-index: 400;"  />
				
				<img src="https://img1.youlu.net/pic/flash/202103040857425742.jpg" style="z-index: 300;" />
				<img src="https://img1.youlu.net/pic/flash/202008271438183818.jpg" style="z-index: 200;"  /> 
				<!-- <img src="http://www.youlu.net/blog/260.html" /> -->
			</div>
			<div class="dot">
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
				<span>6</span>
			</div>
			
		</div>
	
	




	</body>
</html>
